body {
    display: block;
    width: 100%;
    height: 100%;

    // background-color: aqua;
}

//   <!-- 上面的蓝色区域 -->
.blue {
    width: 100%;
    height: 290px;
    background-color: #4294FF;
    padding: 0px 25px;
    // 返回箭头
    .ret{
        position: fixed;
        top: 12px;
        left: 17px;
        color: #fff;
        font-size: 26px;
    }

    //     <!-- 我的运动数据 -->
    .hd {
        padding-top: 40px;

        .tt {
            color: #FFFFFF;
            font-size: 20px;

        }

        .avatar {
            width: 60px;
            height: 60px;
            background-color: #FFFFFF;
            border-radius: 50%;
            overflow: hidden;
            #ava{
                width: 100%;
                height: 100%;
            }

        }
    }

    //     <!-- 总运动。本周消耗 -->
    .motion {
        padding-top: 30px;
       
        .lft {
            padding-right: 10px;
            border-right: 1px dashed #fff;
            .txt {
                color: #AAD9F7;
                font-size: 16px;
                padding-bottom: 10px;
            }

            .menber {
                color: #FFFFFF;
                font-size: 40px;
                .sp1{
                    font-size: 14px;

                }
            }
        }

        .rt1 {
            .txt {
                padding-bottom: 10px;
                color: #AAD9F7;
                font-size: 16px;
            }

            .menber {
                color: #FFFFFF;
                font-size: 40px;
                .sp1{
                    font-size: 14px;

                }
            }
        }
    }
    // <!-- 消耗 累计 连续 -->
    .data3{
        margin-top: 30px;
        //    <!--消耗  -->
        .consumo{
            .co1{
                color: #AAD9F7;
                font-size: 14px;
                line-height: 34px;

            }
            .co2{
                color: #fff;
                font-size: 14px;

            }
        }
        //  <!--累计 -->
        .add2{
            .aa1{
                color: #AAD9F7;
                font-size: 14px;
                line-height: 34px;

            }
            .aa2{
                color: #fff;
                font-size: 14px;

            }
        }
        //  <!-- 连续 -->
        .continu{
            .nu1{
                color: #AAD9F7;
                font-size: 14px;
                line-height: 34px;


            }
            .nu2{
                color: #fff;
                font-size: 14px;

            }
        }
    }
}
//  <!-- 中间的柱状图 -->
.duration{
    height: 288px;
    width: 100%;
    padding: 20px 25px;
    // background-color: aquamarine;
    .histogram{
        height: 248px;
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.18);
    }
}
// <!-- 下面的饼图 -->
.classification{
    width: 100%;
    height: 228px;
   
    padding: 0px 25px;
    // background-color: red;

    .chat{
        width: 100%;
        height: 100%;
        border-radius: 10px;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.18);
        background-color: #fff;
    }
}